// DataSource.js
import React, { useState } from "react";

//注册节点组件
export const NodeRegistrationDialog = ({ isOpen, onClose, onSubmit, zIndex }) => {
  const [formData, setFormData] = useState({
    index_library_name: "",
    port: "",
    ip: "",
    username: "",
    password: "",
    scheme: "https",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("提交数据:", formData); // 调试输出
    onSubmit(formData);
  };

  return (
    isOpen && (
      <div style={{ ...styles.dialogBackdrop, zIndex }}>
        <div style={styles.dialog2}>
          <h3 style={styles.title}>节点注册</h3>
          <form onSubmit={handleSubmit}>
            <div style={styles.inputGroup}>
              <label style={styles.label}>数据源名称:</label>
              <input
                type="text"
                name="index_library_name"
                value={formData.index_library_name}
                onChange={handleChange}
                required
                style={styles.input}
              />
            </div>
            <div style={styles.inputGroup}>
              <label style={styles.label}>ES端口号:</label>
              <input
                type="text"
                name="port"
                value={formData.port}
                onChange={handleChange}
                required
                style={styles.input}
              />
            </div>
            <div style={styles.inputGroup}>
              <label style={styles.label}>ES IP地址:</label>
              <input
                type="text"
                name="ip"
                value={formData.ip}
                onChange={handleChange}
                required
                style={styles.input}
              />
            </div>
            <div style={styles.inputGroup}>
              <label style={styles.label}>ES用户名:</label>
              <input
                type="text"
                name="username"
                value={formData.username}
                onChange={handleChange}
                required
                style={styles.input}
              />
            </div>
            <div style={styles.inputGroup}>
              <label style={styles.label}>ES密码:</label>
              <input
                type="password"
                name="password"
                value={formData.password}
                onChange={handleChange}
                required
                style={styles.input}
              />
            </div>
            <div style={styles.inputGroup}>
              <label style={styles.label}>安全协议:</label>
              <select
                name="scheme"
                value={formData.scheme}
                onChange={handleChange}
                style={styles.select}
              >
                <option value="https">https</option>
                <option value="http">http</option>
              </select>
            </div>
            <div style={styles.buttons}>
              <button type="submit" style={styles.submitButton}>提交</button>
              <button type="button" onClick={onClose} style={styles.cancelButton}>
                取消
              </button>
            </div>
          </form>
        </div>
      </div>
    )
  );
};

//查询节点组件
export const NodeFindDialog = ({ isOpen, onClose, onSubmit }) => {
  // 直接通过 isOpen 判断对话框是否展示
  if (!isOpen) return null;

  const handleSubmit = () => {
    onSubmit("");  // 直接触发查询，查询所有节点
  };

  return (
    <div style={styles.dialogBackdrop}>
      <div style={styles.dialog1}>
        <h3>查询节点</h3>
        {/* 直接调用查询操作，而不需要表单和输入框 */}
        <div style={styles.buttons}>
          <button onClick={handleSubmit}>查询所有节点</button>
          <button type="button" onClick={onClose}>关闭</button>
        </div>
      </div>
    </div>
  );
};

//结果组件
export const ResultDialog = ({ isOpen, onClose, result, onNodeRemove, onNodeRegister }) => {
  if (!isOpen) return null;

  const handleRemoveClick = (indexLibraryName) => {
    console.log(`准备注销数据源: ${indexLibraryName}`);
    onNodeRemove(indexLibraryName);  // 调用注销操作
  };

  const handleRegisterClick = () => {
    console.log("准备注册所有节点");
    // 注册所有节点操作
    onNodeRegister();  // 调用注册操作
  };

  return (
    <div style={styles.dialogBackdrop}>
      <div style={styles.dialog}>
        <h3>操作结果</h3>

        {/* 注册按钮 */}
        <div style={styles.registerButtonContainer}>
          <button 
            style={styles.registerButton} 
            onClick={handleRegisterClick}
          >
            注册节点
          </button>
          
        </div>
        


        {/* 查询结果以表格的形式展示 */}
        {result && result.length > 0 ? (
          <table style={styles.resultTable}>
            <thead>
              <tr>
                <th style={styles.tableHeader}>数据源名称</th>
                <th style={styles.tableHeader}>连接状态</th>
                <th style={styles.tableHeader}>IP 地址</th>
                <th style={styles.tableHeader}>端口</th>
                <th style={styles.tableHeader}>用户名</th>
                <th style={styles.tableHeader}>安全协议</th>
                <th style={styles.tableHeader}>操作</th>
              </tr>
            </thead>
            <tbody>
              {result.map((node, index) => (
                <tr key={index}>
                  <td style={styles.tableCell}>{node.index_library_name}</td>
                  <td style={styles.tableCell}>
                    <span
                      style={node.is_connected ? styles.connected : styles.notConnected}
                    >
                      {node.is_connected ? "连接成功" : "连接失败"}
                    </span>
                  </td>
                  <td style={styles.tableCell}>{node.nodes.ip}</td>
                  <td style={styles.tableCell}>{node.nodes.port}</td>
                  <td style={styles.tableCell}>{node.nodes.username}</td>
                  <td style={styles.tableCell}>{node.nodes.scheme}</td>
                  <td style={styles.tableCell}>
                    <button 
                      style={styles.removeButton} 
                      onClick={() => handleRemoveClick(node.index_library_name)}
                    >
                      注销
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        ) : (
          <p style={styles.noData}>注册成功</p>  // 无数据时的提示
        )}

        <button style={styles.closeButton} onClick={onClose}>关闭</button>
      </div>
    </div>
  );
};

// 样式
const styles = {
  dialogBackdrop: {
    position: "fixed",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0, 0, 0, 0.5)",  // 背景遮罩
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    zIndex: 1000,
  },
  dialog: {
    backgroundColor: "white",
    padding: "20px",
    borderRadius: "5px",
    width: "600px",  // 设置宽度
    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
    maxHeight: "80vh",  // 最大高度
    overflowY: "auto",  // 添加滚动条
  },
  dialog1: {
    backgroundColor: "white",
    padding: "20px",
    width: "300px",  // 设置宽度
  },
  dialog2: {
    backgroundColor: "white",
    padding: "20px",
    borderRadius: "5px",
    width: "500px",  // 设置宽度
    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
    maxHeight: "80vh",  // 最大高度
    overflowY: "auto",  // 添加滚动条
  },
  resultTable: {
    width: "100%",
    borderCollapse: "collapse",
    marginTop: "10px",
  },
  tableHeader: {
    backgroundColor: "#f4f4f4",
    padding: "10px",
    textAlign: "left",
    fontWeight: "bold",
  },
  tableCell: {
    padding: "10px",
    borderBottom: "1px solid #ddd",
    textAlign: "left",
  },
  connected: {
    color: "green",
  },
  notConnected: {
    color: "red",
  },
  noData: {
    textAlign: "center",
    fontSize: "16px",
    color: "#888",
  },
  closeButton: {
    padding: "5px 10px",
    backgroundColor: "#ff4d4d",
    border: "none",
    color: "white",
    cursor: "pointer",
    borderRadius: "5px",
    marginTop: "10px",
    alignSelf: "flex-end",
  },
  removeButton: {
    padding: "5px 10px",
    backgroundColor: "#ff6347",  // 橙色背景
    border: "none",
    color: "white",
    cursor: "pointer",
    borderRadius: "5px",
    fontSize: "14px",
    marginTop: "5px",
    marginRight: "5px",  // 添加右边距
  },
  registerButtonContainer: {
    textAlign: "center",  // 中央对齐
    marginBottom: "15px",  // 设置注册按钮与表格之间的间距
  },
  registerButton: {
    padding: "10px 15px",
    backgroundColor: "#4CAF50",  // 绿色背景
    border: "none",
    color: "white",
    cursor: "pointer",
    borderRadius: "5px",
    fontSize: "16px",
    transition: "background-color 0.3s ease",
  },
  registerButtonHover: {
    backgroundColor: "#45a049",  // 悬停时颜色变化
  },
  title: {
    textAlign: "center",
    fontSize: "20px",
    marginBottom: "20px",
  },
  inputGroup: {
    display: "flex",  // 使用 flexbox 来创建横向布局
    justifyContent: "space-between",  // 确保标签和输入框之间的间距合适
    alignItems: "center",  // 垂直对齐
    marginBottom: "15px",
  },
  label: {
    fontSize: "14px",
    marginBottom: "5px",
    display: "inline-block",  // 让 label 在一行上
    fontWeight: "bold",
    width: "30%",  // 固定宽度，以便标签不会超过一行
  },
  input: {
    width: "65%",  // 输入框宽度，剩余空间分配给输入框
    padding: "8px",
    fontSize: "14px",
    border: "1px solid #ddd",
    borderRadius: "4px",
    boxSizing: "border-box", // 让 padding 和 border 包含在元素的宽度和高度内
  },
  select: {
    width: "65%",  // select 输入框宽度
    padding: "8px",
    fontSize: "14px",
    border: "1px solid #ddd",
    borderRadius: "4px",
    boxSizing: "border-box", // 让 padding 和 border 包含在元素的宽度和高度内
  },
  buttons: {
    display: "flex",
    justifyContent: "space-between",
    marginTop: "20px",
  },
  submitButton: {
    padding: "8px 16px",
    backgroundColor: "#4CAF50", // 绿色背景
    border: "none",
    color: "white",
    cursor: "pointer",
    borderRadius: "4px",
    fontSize: "14px",
    transition: "background-color 0.3s",
  },
  cancelButton: {
    padding: "8px 16px",
    backgroundColor: "#f44336", // 红色背景
    border: "none",
    color: "white",
    cursor: "pointer",
    borderRadius: "4px",
    fontSize: "14px",
    transition: "background-color 0.3s",
  },
};
